<template>
  <div class="hello">
    <div class="title">{{ msg }}</div>
    <div class="content-list">
      <div class="content">
        <img class="title-img" src="../assets/title1.png" alt="" />
        <div shadow="hover" class="content-title">智慧养老</div>
        <div
          @click="go('http://39.100.254.133:5757')"
          class="content-item green"
        >
          <img src="../assets/养老服务_fill.png" alt="" class="img-item" />
          机构版
        </div>
        <div @click="go('http://39.100.254.133:5758')" class="content-item red">
          <img src="../assets/机构.png" alt="" class="img-item" />
          居家版
        </div>
        <div
          @click="go('http://39.100.254.133:5761')"
          class="content-item purpe"
        >
          <img src="../assets/社区.png" alt="" class="img-item" />
          社区版
        </div>
      </div>
      <div class="content">
        <div class="content-title">
          <img class="title-img" src="../assets/title2.png" alt="" />
          养老评估
        </div>
        <div
          class="content-item orange"
          style="margin-bottom: 0"
          @click="go('http://39.100.254.133:5760')"
        >
          <img src="../assets/业代评估.png" alt="" class="img-item" />
          健康养老评估系统
        </div>
        <!-- <div class="content-detail gray">
          <div class="text-detail">功能点1111</div>
          <div class="text-detail">功能点1111</div>
        </div> -->
      </div>
      <div class="content">
        <div shadow="hover" class="content-title">
          <img class="title-img" src="../assets/title3.png" alt="" />
          护工平台
        </div>
        <div
          class="content-item blue"
          @click="go('http://39.100.254.133:5762')"
          style="margin-bottom: 0"
        >
          <img src="../assets/icon_护工 (1).png" alt="" class="img-item" />
          护工管理系统
        </div>
        <!-- <div class="content-detail gray">
          <div class="text-detail">功能点1111</div>
          <div class="text-detail">功能点1111</div>
        </div> -->
      </div>
      <div class="content">
        <div shadow="hover" class="content-title">
          <img class="title-img" src="../assets/title4.png" alt="" />
          养老助餐
        </div>
        <div class="content-item green" style="margin-bottom: 0">
          <img src="../assets/中央厨房助餐.png" alt="" class="img-item" />
          养老助餐系统
        </div>
        <!-- <div class="content-detail gray">
          <div class="text-detail">功能点1111</div>
          <div class="text-detail">功能点1111</div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    go(url) {
      window.open(url);
    },
  },
};
</script>

<style scoped>
.hello {
  height: 100%;
}
.title {
  padding: 45px;
  font-size: 46px;
  letter-spacing: 4px;
  font-weight: 600;
}
.content-list {
  width: 80%;
  display: flex;
  justify-content: space-evenly;
  margin: auto;
}
.content {
  width: 18%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content-title {
  min-width: 112px;
  width: 210px;
  font-weight: 600;
  line-height: 150%;
  font-size: 22px;
  letter-spacing: 3px;
  margin-bottom: 5%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content-item {
  margin-bottom: 10px;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
  line-height: 1em;
  width: 210px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.content-detail {
  text-align: center;
  font-size: 15px;
  width: 210px;
  height: 260px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.text-detail {
  writing-mode: vertical-rl;
}
.green {
  background: #08bdb4;
}
.red {
  background: #c457a2;
}
.purpe {
  background: #8d57c4;
}
.orange {
  background: #e87352;
}
.blue {
  background: #1b96d1;
}
.gray {
  background: #cacacabd;
}
.title-img {
  width: 160px;
  height: 160px;
  margin-bottom: 5px;
}
.img-item {
  width: 45px;
  height: 45px;
  margin-bottom: 10px;
}
</style>
